<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  lang="en" style="height: 100%">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>商品列表</title>
    <style type="text/css">
        .highcharts-figure,
        .highcharts-data-table table {
            min-width: 310px;
            max-width: 800px;
            margin: 1em auto;
        }

        #container {
            height: 320px;
        }
        #container1 {
            height: 320px;
        }

        .highcharts-data-table table {
            font-family: Verdana, sans-serif;
            border-collapse: collapse;
            border: 1px solid #ebebeb;
            margin: 10px auto;
            text-align: center;
            width: 100%;
            max-width: 500px;
        }

        .highcharts-data-table caption {
            padding: 1em 0;
            font-size: 1.2em;
            color: #555;
        }

        .highcharts-data-table th {
            font-weight: 600;
            padding: 0.5em;
        }

        .highcharts-data-table td,
        .highcharts-data-table th,
        .highcharts-data-table caption {
            padding: 0.5em;
        }

        .highcharts-data-table thead tr,
        .highcharts-data-table tr:nth-child(even) {
            background: #f8f8f8;
        }

        .highcharts-data-table tr:hover {
            background: #f1f7ff;
        }

    </style>
</head>
<body>
<script type="text/javascript" src="assets/dist/highcharts.js"></script>
    <figure class="highcharts-figure">
        <div id="container"></div>
        <div id="container1"></div>
    </figure>
</html>
<script type="text/javascript">
    var catearr="${catearr}";
    var catearr = catearr.slice(1, catearr.length - 1);
    var catearr = catearr.split(",");
    var cnm="${countnum}";
    //var countnum = JSON.parse(countnum);
    var cnm = cnm.slice(1, cnm.length - 1);
    var countnum=cnm.split(",");
    var countnum = countnum.map(Number);
    Highcharts.chart('container', {
        chart: {
            type: 'column'
        },
        title: {
            text: '出库记录报表'
        },
        subtitle: {
            text: '数据来源仓库管理系统'
        },
        xAxis: {
            categories: catearr,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '出库数量 (件)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.0f} 件</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '出库商品',
             data: countnum
            //data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 51.1]
        }]
    });
    //当前库存
    var caname="${caname}";
    var caname = caname.slice(1, caname.length - 1);
    var caname = caname.split(",");
    var canum="${canum}";
    //var countnum = JSON.parse(countnum);
    var canum = canum.slice(1, canum.length - 1);
    var canum=canum.split(",");
    var canum = canum.map(Number);
    Highcharts.chart('container1', {
        chart: {
            type: 'column'
        },
        title: {
            text: '当前库存报表'
        },
        subtitle: {
            text: '数据来源仓库管理系统'
        },
        xAxis: {
            categories: caname,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '库存数量 (件)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.0f} 件</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: '库存商品',
            data: canum
        }]
    });
</script>
